<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     *{
        margin:0;padding:0;
     }
     .box{
        width: 100px;
        height: 100px;
        background:plum;
        border-radius:100%;
        margin-left:100px;
        -webkit-animation:lates 4s;
     }
     @keyframes lates{
        0%{
          -webkit-transform:translate(0);
        }
        25%{
          -webkit-transform:translateX(500px);    
        }
       50%{
          -webkit-transform:translate(500px,500px);
        }
         75%{
          -webkit-transform:translate(0,500px); 
        }
        100%{
         -webkit-transform:translate(0,0);
        }
     }


    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>